<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header, .footer {
      width: 1200px;
      margin: 0 auto;
      background-color: skyblue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
      height: 120px;
      color: #fff;
    }

    .footer {
      height: 300px;
    }

    ul, li {
      list-style: none;
    }

    ul {
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      justify-content: space-between;
      padding-top: 10px;
    }

    li {
      width: 290px;
      border: 1px solid #333;
      margin-bottom: 10px;
      padding: 5px;
      box-sizing: border-box;
    }

    li > a > img {
      width: 278px;
      display: block;
    }

    .pagination {
      width: 1200px;
      margin: 10px auto;
      height: 50px;
      display: flex;
      align-items: center;
    }

    .pagination > .prev,
    .pagination > .next {
      width: 50px;
      height: 30px;
      cursor: pointer;
      background-color: orange;
      font-size: 24px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .pagination > .disable {
      cursor: not-allowed;
      background-color: #ccc;
    }

    .pagination > .total {
      font-size: 30px;
      font-weight: 700;
      margin: 0 20px;
    }

    .pagination > select {
      font-size: 22px;
      padding-left: 20px;
      margin-left: 30px;
    }
  </style>
</head>
<body>

  <div class="header">网页头部</div>
  <div class="pagination">
    <span class="prev disable">&lt;</span>
    <span class="total">1 / 100</span>
    <span class="next">&gt;</span>
    <select>
      <option value="4">4</option>
      <option value="8">8</option>
      <option value="12">12</option>
      <option value="16">16</option>
    </select>
  </div>
  <ul>

  </ul>
  <div class="footer">网页底部</div>
  <script src="./01taobao.js"></script>
  <script>
        // console.log(res)

        // var datas = res.reduce(function(prev,item){
        //     return prev + `
        //     <li>
        //         <a href="${item.detail_url}"><img src="${item.pic_url}
        //             " alt=""></a>
        //         <p>${item.title}</p>
        //         <p>价格:${item.price}</p>
        //         <p>销量:${item.sales}</p>
        //         <p>店名:${item.seller_nick}</p>
        //         <p>更新时间:${item.data_update}</p>
        //     </li>
            
        //     `
        // },'');

        // // datas  = '<li></li><li></li><li></li>';

        // document.getElementsByTagName('ul')[0].innerHTML = datas;

        // 以上把所有的数据放在一页上 当用户想回过头查找某一个数据的时候 很麻烦 
        // 解决方案 分页   
        // 从第一跳到 第2页 数据重新渲染  
        // 而且数据要联动 

        // 当前第二页  <span class="total">1 / 100</span>  
        // 也要换成  <span class="total">2 / 总页数 </span>
        // 而且 第几页决定了上一页 下一页的按钮能否点击  

        // 总结  数据渲染 数据联动   这个动作是重复的  只要换页面 这个动作就执行 
        
        // 截取数据不能影响原数组  截取方法只有slice  左闭右开 

        //  第几页用户说了算 已知   每页显示的条数 程序员用户决定已知  截取范围


        //    1                     4                               0~4
        //    2                     4                               4~8
        //    3                     4                               8~12
        //    ...

        //    第几页                每页条数                     (第几页-1)*每页条数,第几页*每页条数
        
        // 声明变量 
        var current = 5;
        var pagesize = 8;
        var ulele = document.querySelector('ul');
        var totalele = document.querySelector('.total');
        var total = 0;
        var prevele = document.querySelector('.prev');
        var nextele = document.querySelector('.next');
        var selectele = document.querySelector('select');

        function bindhtml(){

            // 截取数据 
            var bindlist = res.slice((current-1)*pagesize,current*pagesize);
            // bindlist就是当前这一页的数据 
            // 数据渲染   把当前这一页的数据渲染到页面上  

            ulele.innerHTML =  bindlist.reduce(function(prev,item){
            return prev + `
            <li>
                <a href="${item.detail_url}"><img src="${item.pic_url}
                    " alt=""></a>
                <p>${item.title}</p>
                <p>价格:${item.price}</p>
                <p>销量:${item.sales}</p>
                <p>店名:${item.seller_nick}</p>
                <p>更新时间:${item.data_update}</p>
            </li>
            `
        },'');

          // 将当前第几页  总页数 同步到   <span class="total">1 / 100</span>
        // 总页数 = 总数据条数 / 每页条数 
          total =  Math.ceil(res.length / pagesize);
          totalele.innerText = `${current} / ${total}`;


          // 根据当前页 判断 上一页按钮  下一页按钮 能否使用 
          // 当当前页=1 上一页按钮 不能再点击  
          // 上一页按钮  禁用 class="prev disable" 能用"prev"
            prevele.className = current==1?"prev disable":"prev";
          // 当当前页=总页数 下一页按钮 不能再点击 
          // 下一页按钮  禁用 class="next disable" 能用"next"
            nextele.className = current==total?"next disable":"next";
            selectele.value = pagesize; //每页显示的条数 让这个值默认被选中
        }

        bindhtml();


        prevele.onclick = function(){
            if(current == 1) return;
            current--;
            bindhtml()
        }


        nextele.onclick = function(){
            if(current == total) return;
            current++;
            bindhtml()
        }

        // 表单事件触发以前 和 以后 内容发生变化 触发的事件 叫change

        selectele.onchange = function(){
            // alert(selectele.value);
            pagesize = selectele.value;
            current = 1;
            bindhtml();

        }


  </script>
</body>
</html>